<template>
  <div>
    <button type="button" @click="btnClick">{{btnMsg}}</button>
    <h3 v-show="isShow">这里是自定义事件</h3>
  </div>
</template>

<script>
export default {
  name: 'Emit',
  data () {
    return {
      isShow: true,
      btnMsg: '隐藏'
    }
  },
  methods: {
    btnClick () {
      this.isShow = !this.isShow
      this.btnMsg = this.isShow ? '隐藏' : '显示'
      if (this.isShow) {
        this.$emit('showEmit', this.btnMsg)
      } else {
        this.$emit('hideEmit', this.btnMsg)
      }
    }
  }
}
</script>

<style scoped>

</style>
